<template>
  <div class="base-info-card">
    <div class="left">
      <leftList :list="list" @handle-item="handleItem" />
    </div>
    <div class="right">
      <baseInfo v-if="listValue === 'baseInfo'" />
    </div>
  </div>
</template>
<script setup lang="ts">
import leftList from '@/views/myPipeline/edit/components/components/leftList.vue';
import baseInfo from './baseInfo.vue';
const list = [
  {
    icon: 'listicon',
    value: 'baseInfo',
    title: '流水线模板信息',
  },
];
const listValue = ref('baseInfo');
const handleItem = (item: any) => {
  listValue.value = item.value;
};
</script>

<style scoped lang="less">
.base-info-card {
  display: flex;
  height: 100%;
  width: calc(100% + 20px);

  .left {
    width: 240px;
    height: 100%;
  }

  .right {
    flex: 1;
    height: 100%;
    padding: 20px 20px 20px 18px;
    overflow: auto;
  }
}
</style>
